<template>
  <div class="app-container home">
    <div class="one" v-loading="oneLoading">
      <el-row>
        <el-col :xs="0" :sm="0" :md="0" :lg="24" :xl="24">
          <div class="one-image">
            <div class="one-picture">
              <el-avatar :size="80" :src="circleUrl"/>
            </div>
            <div class="one-text">
              {{ name }} {{ getGreeting() }}
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="two">
            <div>
              <el-text size="large" style="font-weight: bold;">物联网平台简介</el-text>
            </div>
            <div style="margin-top: 20px;">
              <el-text>
                本平台是一款综合性智能管理解决方案，集成扬尘设备管理（实时数据、历史记录查询）、考勤机管控（打卡记录分析）、监控设备运维及视频调阅功能，
                支持MQTT/国标协议服务器运维，提供云端录像存储与国标视频实时查看服务。通过多协议兼容、数据可视化及智能分析，助力企业实现设备全生命周期管理、
                高效运维与安全监控，满足环保、安防、考勤等多场景智能化需求。
              </el-text>
            </div>
            <div style="margin-top: 10px; margin-bottom: 10px;">
              <el-button :icon="Link" round @click="goTarget('https://gitee.com/xiaochemgzi')">作者gitee首页</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card header="技术栈" style="margin-top: 10px;">
          <div ref="chartContainer" style="width: 100%; height: 600px;"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card header="版本信息" style="margin-top: 10px;">
          <div style="width: 100%; height: 600px;">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="V1.0.0" name="0">
                <div>
                  系统发布！
                </div>
                <div>
                  系统功能：<br />
                  1. 佳佳眼扬尘设备管理、设备现场信息获取、设备历史记录获取。<br />
                  2. 监控设备管理。<br />
                  3. 考勤机设备管理、打卡记录查询。<br />
                  4. MQTT/国标协议服务器管理。<br />
                  5. 云端录像存储与国标视频实时查看服务。<br />
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card header="联系我吧" style="margin-top: 10px;">
          微信：chenbai0511
          <div style="margin-top: 20px;">
            <img style="height: 200px;" src="https://gdhxkj.oss-cn-guangzhou.aliyuncs.com/file/2025/01/16/17c8bc62cbd5b58c27775e0c2ff83bd_20250116174058A003.jpg">
            <img style="height: 200px; margin-left: 10px;" src="https://gdhxkj.oss-cn-guangzhou.aliyuncs.com/2025/02/15/63d6edafdee1405c93b45cefac082d3d.jpg">
          </div>
          <br />
          开源不易，可以请我喝杯咖啡吗qwq
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="Index">
import {getInfo} from "@/api/login";
import {Link} from '@element-plus/icons-vue';
import {onMounted} from "vue";
import {Chart} from '@antv/g2';

const version = ref('3.8.9');
const activeNames = ref(['0'])
const circleUrl = ref('');
const name = ref('');
const oneLoading = ref(true);
const chartContainer = ref(null);

const dataChartContainer= ref([
  {
    "value": 20.5,
    "text": "jdk17",
    "name": "jdk17"
  },
  {
    "value": 20,
    "text": "java",
    "name": "java"
  },
  {
    "value": 19,
    "text": "vue",
    "name": "vue"
  },
  {
    "value": 7,
    "text": "element-plus",
    "name": "element-plus"
  },
  {
    "value": 1,
    "text": "antv",
    "name": "antv"
  },
  {
    "value": 5,
    "text": "mongo",
    "name": "mongo"
  },
  {
    "value": 9.3,
    "text": "mysql",
    "name": "mysql"
  },
  {
    "value": 6.2,
    "text": "Security",
    "name": "Security"
  },
  {
    "value": 9.2,
    "text": "mqtt",
    "name": "mqtt"
  },
  {
    "value": 9.1,
    "text": "gb28181",
    "name": "gb28181"
  },
  {
    "value": 8.15,
    "text": "mybatis",
    "name": "mybatis"
  },
  {
    "value": 8.154,
    "text": "axios",
    "name": "axios"
  },
  {
    "value": 8.354,
    "text": "hutool",
    "name": "hutool"
  },
  {
    "value": 10.354,
    "text": "zlmediakit",
    "name": "zlmediakit"
  },
  {
    "value": 10.054,
    "text": "wvp",
    "name": "wvp"
  },
])

function goTarget(url) {
  window.open(url, '__blank')
}

async function getUserInfo() {
  const res = await getInfo();
  oneLoading.value = false;
  circleUrl.value = '/dev-api' + res.user.avatar;
  name.value = res.user.nickName;
}

function newChartContainer() {
  const chart = new Chart({
    container: chartContainer.value,
    autoFit: true,
    paddingTop: 40,
  });
  chart
      .wordCloud()
      .data(dataChartContainer.value)
      .layout({
        spiral: 'rectangular',
        fontSize: [20, 100],
      })
      .encode('color', 'text');
  chart.render();
}

onMounted(async () => {
  await getUserInfo();
  if (chartContainer.value) {
    await newChartContainer();
  }
})


/**
 * 获取当前时间
 * @returns {string}
 */
function getGreeting() {
  const now = new Date();
  const hours = now.getHours();
  if (hours >= 6 && hours < 12) {
    return "早上好！";
  } else if (hours >= 12 && hours < 18) {
    return "中午好！";
  } else {
    return "晚上好！";
  }
}
</script>

<style scoped lang="scss">
.one {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-fill-color-blank);
  background-color: var(--el-card-bg-color);
  border: 1px solid var(--el-card-border-color);
  color: var(--el-text-color-primary);
  overflow: hidden;
  transition: var(--el-transition-duration);

  .one-image {
    background-image: url("../assets/images/index_bg.png");
    background-size: cover;
    height: 180px;
    overflow: hidden;
    display: flex;

    .one-picture {
      margin-top: 40px;
      margin-left: 40px;
    }

    .one-text {
      margin-top: 60px;
      margin-left: 20px;
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

.two {
  margin-left: 10px;
  margin-top: 20px;
}
</style>

